<template>
	<view class="driver-order">
		<!-- 提示部分 -->
		<view class="tips">
			<u-icon style="margin-left: 20rpx;margin-right: 20rpx;" name="info-circle-fill" size="50" color="#FE9903"></u-icon>
			<view style="display: flex;flex-direction: column;font-size: 26rpx;flex: 1;color:#FE9903;font-weight: bold;">
				<text>温馨提示:创建订单后,您的状态将变为开始代驾状态!</text>
				<text style="margin-top: 10rpx;">在此订单结束前,您都不会接收到系统的其它订单!</text>
			</view>
		</view>

		<!-- 当前时间 -->
		<view class="com_item">
			<u-icon name="clock" size="40" color="#dcdfe6"></u-icon>
			<text class="com_txt">现在</text>
		</view>

		<!-- 间隔线 -->
		<view class="line"></view>

		<!-- 客户电话号码 -->
		<view class="com_item">
			<u-icon name="phone-fill" size="40" color="#dcdfe6"></u-icon>
			<input class="com_input" type="number" maxlength="11" v-model="phoneNum" placeholder="请输入客户电话号码" />
		</view>

		<!-- 间隔线 -->
		<view class="line"></view>

		<!-- 起点 -->
		<view class="com_item" @tap="chooseLocationHandle('from')">
			<view class="cycle" style="background-color: #34BA97;"></view>
			<text class="com_txt">{{ from.address }}</text>
		</view>

		<!-- 间隔线 -->
		<view class="line"></view>

		<!-- 终点 -->
		<view class="com_item" @tap="chooseLocationHandle('to')">
			<view class="cycle" style="background-color: #FF9D5B;"></view>
			<text class="com_txt">{{ to.address }}</text>
		</view>

		<!-- 间隔线 -->
		<view class="line" style="margin-left: 0;"></view>

		<!-- 确定下单按钮 -->
		<view>
			<view style="width: 80%;margin: 0 auto;margin-top: 140rpx;"><u-button @click="doCommitAction" :ripple="true" type="primary">确定下单</u-button></view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
//地图选点操作
const chooseLocation = requirePlugin('chooseLocation');

let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');

export default {
	data() {
		return {
			//输入的用户电话号码
			phoneNum: '',

			qqmapsdk: null,

			from: {
				address: '',
				longitude: 0,
				latitude: 0
			},

			to: {
				address: '请选择目的地',
				longitude: 0,
				latitude: 0
			},

			//默认的经纬度
			longitude: 116.397505,
			latitude: 39.908675,

			//选择起始点的标识
			flag: null
		};
	},

	methods: {
		//地图选点的操作
		chooseLocationHandle(flag) {
			let that = this;
			that.flag = flag;
			let key = that.tencent.map.key; //使用在腾讯位置服务申请的key
			// console.log("调用的key值是:", key);
			let referer = that.tencent.map.referer; //调用插件的app的名称
			let latitude = that.latitude;
			let longitude = that.longitude;
			let data = JSON.stringify({
				latitude: latitude,
				longitude: longitude
			});
			uni.navigateTo({
				url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${data}`
			});
		},

		initLocation() {
			//初始化qqmapsdk
			let qqmapsdk = new QQMapWX({
				key: this.tencent.map.key
			});

			this.qqmapsdk = qqmapsdk;

			let that = this;

			//获取当前位置信息
			uni.getLocation({
				type: 'gcj02',
				// type: 'wgs84',
				success: function(res) {
					// console.log('定位的位置是:', res)
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.from.latitude = res.latitude;
					that.from.longitude = res.longitude;

					that.qqmapsdk.reverseGeocoder({
						location: {
							latitude: that.latitude,
							longitude: that.longitude
						},
						success: function(resp) {
							//console.log(resp);
							that.from.address = resp.result.address;
						},
						fail: function(error) {
							console.log(error);
						}
					});
				}
			});
		},

		//确定下单的操作
		doCommitAction() {
			// console.log(`点击确定下单了`);

			//判断电话号码
			if (this.isEmpty(this.phoneNum)) {
				// this.showToast('客户电话号码不能为空')
				this.$refs.uToast.show({
					title: '客户电话号码不能为空'
				});
				return;
			}

			if (!this.testPhone(this.phoneNum)) {
				this.$refs.uToast.show({
					title: '电话号码格式不正确'
				});
				return;
			}

			//判断开始地点
			if (this.isEmpty(this.from.address)) {
				this.$refs.uToast.show({
					title: '请选择代驾的开始地点'
				});
				return;
			}

			//判断结束地点
			if (this.isEmpty(this.to.address) || this.to.address == '请选择目的地') {
				this.$refs.uToast.show({
					title: '请选择代驾的结束地点'
				});
				return;
			}

			//请求服务器
			this.ajax(
				this.url.create_order,
				'POST',
				{
					userTel: this.phoneNum,
					startPlace: this.from.address,
					startPlaceLatitude: this.from.latitude,
					startPlaceLongitude: this.from.longitude,
					endPlace: this.to.address,
					endPlaceLatitude: this.to.latitude,
					endPlaceLongitude: this.to.longitude
				},
				res => {
					// console.log(`获取的创建订单的结果是:`, res);	
					if (res.data.code == 200) {
						//创建订单成功
						this.$refs.uToast.show({
							title: '创建订单成功',
							callback:()=>{
								//发送创建订单的事件
								uni.$emit("driverCreateOrder")
								//跳转到工作台界面
								uni.switchTab({
									url: '../workbench/workbench'
								});
							}
						});
					} else {
						//创建订单成功
						this.$refs.uToast.show({
							title: `创建失败,${res.data.msg}`
						});
					}
				}
			);
		}
	},

	onLoad() {
		//加载的时候直接定位开始位置
		this.initLocation();
	},

	onShow() {
		//选点后的回调
		let location = chooseLocation.getLocation();
		if (location != null) {
			let place = location.name;
			let latitude = location.latitude;
			let longitude = location.longitude;
			if (this.flag == 'from') {
				this.from.address = place;
				this.from.latitude = latitude;
				this.from.longitude = longitude;
			} else {
				this.to.address = place;
				this.to.latitude = latitude;
				this.to.longitude = longitude;
			}
		}
	},

	onHide() {
		//清除地图选点的结果
		chooseLocation.setLocation(null);
	},

	onUnload() {
		// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
		chooseLocation.setLocation(null);
	}
};
</script>

<style lang="less">
@import url('create_order.less');
</style>
